<template>
	<h2>计算属性与监视</h2>
	<fieldset>
		<legend>姓名操作</legend>
		姓氏：<input
			type="text"
			placeholder="请输入姓氏"
			v-model="user.firstName"
		/><br />
		名字：<input type="text" placeholder="请输入名字" v-model="user.lastName" />
	</fieldset>
	<fieldset>
		<legend>计算属性与监视的演示</legend>
		姓名：<input type="text" placeholder="请输入姓名" /><br />
		姓名：<input type="text" placeholder="请输入姓名" /><br />
		姓名：<input type="text" placeholder="请输入姓名" />
	</fieldset>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from "vue"

export default defineComponent({
	name: "App",
	setup() {
		// 定义一个响应式对象
		const user = reactive({
			// 姓氏
			firstName: "东方",
			// 名字
			lastName: "不败"
		})

		// 计算属性实现:如果只传入一个回调函数就是get方法
		const fullName = computed(() => {
			return user.firstName + "_" + user.lastName
		})

		return {
			user
		}
	}
})
</script>

<style></style>
